<template>
	<view class="post-detail-page">
		<view v-if="postData" class="post-content">
			<view class="post-header">
				<text class="post-title">{{ postData.post.title }}</text>
				<view class="post-meta">
					<text class="post-author">{{ postData.post.authorName }}</text>
					<text class="post-time">{{ formatTime(postData.post.createdAt) }}</text>
				</view>
			</view>
			
			<image 
				v-if="postData.post.imageUrl" 
				class="post-image" 
				:src="getImageUrl(postData.post.imageUrl)" 
				mode="widthFix"
			/>
			
			<view class="post-body">
				<text class="post-content-text">{{ postData.post.content }}</text>
			</view>
			
			<view class="post-actions">
				<view class="action-item" @click="toggleLike">
					<image class="action-icon" :src="postData.isLiked ? '/static/assets/icons/like_fill.png' : '/static/assets/icons/like.png'" mode="aspectFit"></image>
					<text class="action-text">{{ postData.likeCount || 0 }}</text>
				</view>
				<view class="action-item" @click="toggleFavorite">
					<image class="action-icon" :src="postData.isFavorited ? '/static/assets/icons/favor_fill.png' : '/static/assets/icons/favor.png'" mode="aspectFit"></image>
					<text class="action-text">{{ postData.favoriteCount || 0 }}</text>
				</view>
			</view>
		</view>
		
		<!-- 评论区 -->
		<view v-if="postData" class="comments-section">
			<view class="comments-header">
				<text class="comments-title">评论 ({{ comments.length }})</text>
			</view>
			
			<!-- 评论输入框 -->
			<view class="comment-input-box">
				<input 
					class="comment-input" 
					v-model="newComment" 
					placeholder="写评论..." 
					@confirm="submitComment"
				/>
				<button class="comment-submit" @click="submitComment">发送</button>
			</view>
			
			<!-- 评论列表 -->
			<view class="comments-list">
				<view v-for="comment in comments" :key="comment.id" class="comment-item">
					<image 
						class="comment-avatar" 
						:src="getCommentAvatar(comment)" 
						mode="aspectFill"
					/>
					<view class="comment-content">
						<view class="comment-header">
							<text class="comment-author">{{ comment.userNickname }}</text>
							<text class="comment-time">{{ formatTime(comment.createdAt) }}</text>
						</view>
						<text class="comment-text">{{ comment.content }}</text>
						<view class="comment-actions">
							<view class="comment-action" @click="toggleCommentLike(comment)">
								<image class="comment-icon" :src="comment.isLiked ? '/static/assets/icons/like_fill.png' : '/static/assets/icons/like.png'" mode="aspectFit"></image>
								<text class="comment-count">{{ comment.likeCount || 0 }}</text>
							</view>
							<view class="comment-action" @click="showReplyInput(comment)">
								<text class="comment-icon-text">💬</text>
								<text class="comment-count">回复</text>
							</view>
						</view>
						
						<!-- 回复列表 -->
						<view v-if="comment.replies && comment.replies.length > 0" class="replies-list">
							<view v-for="reply in comment.replies" :key="reply.id" class="reply-item">
								<image 
									class="reply-avatar" 
									:src="getCommentAvatar(reply)" 
									mode="aspectFill"
								/>
								<view class="reply-content">
									<view class="reply-header">
										<text class="reply-author">{{ reply.userNickname }}</text>
										<text class="reply-time">{{ formatTime(reply.createdAt) }}</text>
									</view>
									<text class="reply-text">{{ reply.content }}</text>
									<view class="reply-actions">
										<view class="comment-action" @click="toggleCommentLike(reply)">
											<image class="comment-icon" :src="reply.isLiked ? '/static/assets/icons/like_fill.png' : '/static/assets/icons/like.png'" mode="aspectFit"></image>
											<text class="comment-count">{{ reply.likeCount || 0 }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						
						<!-- 回复输入框 -->
						<view v-if="replyingTo === comment.id" class="reply-input-box">
							<input 
								class="reply-input" 
								v-model="replyContent" 
								placeholder="回复..." 
								@confirm="submitReply(comment.id)"
							/>
							<button class="reply-submit" @click="submitReply(comment.id)">发送</button>
						</view>
					</view>
				</view>
				
				<view v-if="comments.length === 0" class="no-comments">暂无评论</view>
			</view>
		</view>
		
		<view v-if="!postData" class="loading">加载中...</view>
	</view>
</template>

<script>
import { api } from '../../utils/request.js'
import { BASE_URL } from '../../utils/server.js'

export default {
	data() {
		return {
			postData: null,
			postId: null,
			comments: [],
			newComment: '',
			replyingTo: null,
			replyContent: ''
		}
	},
	onLoad(options) {
		if (options.id) {
			this.postId = options.id
			this.loadPost()
			this.loadComments()
		}
	},
	methods: {
		async loadPost() {
			try {
				const res = await api.getPost(this.postId)
				if (res.code === 0) {
					this.postData = res.data
				} else {
					uni.showToast({ icon: 'none', title: res.message || '加载失败' })
					this.postData = null
				}
			} catch (e) {
				console.error('加载帖子失败', e)
				uni.showToast({ icon: 'none', title: '加载失败' })
				this.postData = null
			}
		},
		async loadComments() {
			if (!this.postId) return
			try {
				const res = await api.getPostComments(this.postId)
				if (res.code === 0) {
					this.comments = res.data || []
				} else {
					this.comments = []
				}
			} catch (e) {
				console.error('加载评论失败', e)
				this.comments = []
			}
		},
		async toggleLike() {
			try {
				const res = await api.togglePostLike(this.postId)
				if (res.code === 0) {
					this.postData.isLiked = res.data.isLiked
					this.postData.likeCount = res.data.likeCount
				} else {
					uni.showToast({ icon: 'none', title: res.message || '操作失败' })
				}
			} catch (e) {
				uni.showToast({ icon: 'none', title: '操作失败' })
			}
		},
		async toggleFavorite() {
			try {
				const res = await api.togglePostFavorite(this.postId)
				if (res.code === 0) {
					this.postData.isFavorited = res.data.isFavorited
					this.postData.favoriteCount = res.data.favoriteCount
				} else {
					uni.showToast({ icon: 'none', title: res.message || '操作失败' })
				}
			} catch (e) {
				uni.showToast({ icon: 'none', title: '操作失败' })
			}
		},
		async submitComment() {
			if (!this.newComment.trim()) {
				uni.showToast({ icon: 'none', title: '请输入评论内容' })
				return
			}
			
			try {
				const res = await api.createPostComment(this.postId, {
					content: this.newComment,
					parentId: 0
				})
				if (res.code === 0) {
					this.newComment = ''
					this.loadComments()
					uni.showToast({ title: '评论成功' })
				} else {
					uni.showToast({ icon: 'none', title: res.message || '评论失败' })
				}
			} catch (e) {
				uni.showToast({ icon: 'none', title: '评论失败' })
			}
		},
		showReplyInput(comment) {
			this.replyingTo = comment.id
			this.replyContent = ''
		},
		async submitReply(parentId) {
			if (!this.replyContent.trim()) {
				uni.showToast({ icon: 'none', title: '请输入回复内容' })
				return
			}
			
			try {
				const res = await api.createPostComment(this.postId, {
					content: this.replyContent,
					parentId: parentId
				})
				if (res.code === 0) {
					this.replyContent = ''
					this.replyingTo = null
					this.loadComments()
					uni.showToast({ title: '回复成功' })
				} else {
					uni.showToast({ icon: 'none', title: res.message || '回复失败' })
				}
			} catch (e) {
				uni.showToast({ icon: 'none', title: '回复失败' })
			}
		},
		async toggleCommentLike(comment) {
			try {
				const res = await api.toggleCommentLike(this.postId, comment.id)
				if (res.code === 0) {
					comment.isLiked = res.data.isLiked
					comment.likeCount = res.data.likeCount
				} else {
					uni.showToast({ icon: 'none', title: res.message || '操作失败' })
				}
			} catch (e) {
				uni.showToast({ icon: 'none', title: '操作失败' })
			}
		},
		getImageUrl(url) {
			if (!url) return ''
			if (url.startsWith('http')) return url
			return BASE_URL + url
		},
		getAvatarUrl(url) {
			if (!url) return '/static/logo.png'
			if (url.startsWith('http')) return url
			return BASE_URL + url
		},
		getCommentAvatar(comment) {
			// 兼容多种字段名：userAvatarUrl, avatar_url, user_avatar_url
			return this.getAvatarUrl(comment.userAvatarUrl || comment.avatar_url || comment.user_avatar_url)
		},
		formatTime(timeStr) {
			if (!timeStr) return ''
			const date = new Date(timeStr)
			const now = new Date()
			const diff = now - date
			
			if (diff < 60000) return '刚刚'
			if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前'
			if (diff < 86400000) return Math.floor(diff / 3600000) + '小时前'
			if (diff < 604800000) return Math.floor(diff / 86400000) + '天前'
			
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			const hour = String(date.getHours()).padStart(2, '0')
			const minute = String(date.getMinutes()).padStart(2, '0')
			return `${year}-${month}-${day} ${hour}:${minute}`
		}
	}
}
</script>

<style>
.post-detail-page {
	min-height: 100vh;
	background: #F0F7FF;
	padding-bottom: 40rpx;
}

.post-content {
	background: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 8rpx 24rpx rgba(91,155,213,.1);
}

.post-header {
	margin-bottom: 30rpx;
}

.post-title {
	font-size: 36rpx;
	color: #2C5F8D;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 20rpx;
	display: block;
}

.post-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 24rpx;
	color: #8FA8C4;
}

.post-image {
	width: 100%;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
}

.post-body {
	margin-top: 30rpx;
}

.post-content-text {
	font-size: 28rpx;
	color: #4A6FA5;
	line-height: 1.8;
	white-space: pre-wrap;
	word-break: break-all;
}

.post-actions {
	display: flex;
	gap: 40rpx;
	margin-top: 30rpx;
	padding-top: 30rpx;
	border-top: 1rpx solid #E8F2FF;
}

.action-item {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.action-icon {
	width: 40rpx;
	height: 40rpx;
}

.action-text {
	font-size: 24rpx;
	color: #5B9BD5;
}

.comments-section {
	background: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 8rpx 24rpx rgba(91,155,213,.1);
}

.comments-header {
	margin-bottom: 30rpx;
}

.comments-title {
	font-size: 32rpx;
	color: #2C5F8D;
	font-weight: 600;
}

.comment-input-box {
	display: flex;
	gap: 20rpx;
	margin-bottom: 30rpx;
	padding-bottom: 30rpx;
	border-bottom: 1rpx solid #eee;
}

.comment-input {
	flex: 1;
	padding: 20rpx;
	background: #E8F2FF;
	border-radius: 20rpx;
	font-size: 28rpx;
}

.comment-submit {
	padding: 20rpx 40rpx;
	background: linear-gradient(135deg, #5B9BD5, #7BB3E8);
	color: #fff;
	border-radius: 20rpx;
	font-size: 28rpx;
}

.comments-list {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}

.comment-item {
	display: flex;
	gap: 20rpx;
}

.comment-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	background: #f0f0f0;
	flex-shrink: 0;
}

.comment-content {
	flex: 1;
}

.comment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
}

.comment-author {
	font-size: 28rpx;
	color: #2C5F8D;
	font-weight: 500;
}

.comment-time {
	font-size: 22rpx;
	color: #8FA8C4;
}

.comment-text {
	font-size: 28rpx;
	color: #4A6FA5;
	line-height: 1.6;
	margin-bottom: 15rpx;
	display: block;
}

.comment-actions {
	display: flex;
	gap: 30rpx;
}

.comment-action {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.comment-icon {
	width: 32rpx;
	height: 32rpx;
}

.comment-icon-text {
	font-size: 32rpx;
}

.comment-count {
	font-size: 24rpx;
	color: #5B9BD5;
}

.replies-list {
	margin-top: 20rpx;
	padding-left: 20rpx;
	border-left: 2rpx solid #E8F2FF;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.reply-item {
	display: flex;
	gap: 15rpx;
}

.reply-avatar {
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	background: #f0f0f0;
	flex-shrink: 0;
}

.reply-content {
	flex: 1;
}

.reply-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8rpx;
}

.reply-author {
	font-size: 26rpx;
	color: #2C5F8D;
}

.reply-time {
	font-size: 20rpx;
	color: #8FA8C4;
}

.reply-text {
	font-size: 26rpx;
	color: #4A6FA5;
	line-height: 1.6;
	margin-bottom: 10rpx;
	display: block;
}

.reply-actions {
	display: flex;
	gap: 20rpx;
}

.reply-input-box {
	display: flex;
	gap: 15rpx;
	margin-top: 15rpx;
	padding-top: 15rpx;
	border-top: 1rpx solid #f0f0f0;
}

.reply-input {
	flex: 1;
	padding: 15rpx;
	background: #E8F2FF;
	border-radius: 15rpx;
	font-size: 26rpx;
}

.reply-submit {
	padding: 15rpx 30rpx;
	background: linear-gradient(135deg, #5B9BD5, #7BB3E8);
	color: #fff;
	border-radius: 15rpx;
	font-size: 26rpx;
}

.no-comments {
	text-align: center;
	padding: 60rpx;
	color: #8FA8C4;
	font-size: 26rpx;
}

.loading {
	text-align: center;
	padding: 100rpx;
	color: #8FA8C4;
}
</style>
